<template>
  <div>
    <table class="table table-bordered">
      <tbody>
        <tr>
          <td>序号</td>
          <td>酒店名称</td>
          <td>酒店图片</td>
          <td>操作</td>
        </tr>
        <tr v-for="a in info.list">
          <td>{{ a.sid }}</td>
          <td>{{ a.sname }}</td>
          <td><img :src="a.simg" width="100" height="100" /></td>
          <td>
            <input type="button" value="修改" @click="xg" />
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <div>
    <span
      >总条数<b>{{ info.totalcount }}</b></span
    >
    <span
      >总页数<b>{{ info.totalpage }}</b></span
    >
    <span
      >当前页<b>{{ data.pageindex }}/{{ info.totalpage }}</b></span
    >
    <span>
      <input type="button" value="首页" @click="page(1)" />
      <input type="button" value="上一页" @click="page(data.pageindex - 1)" />
      <input type="button" value="下一页" @click="page(data.pageindex + 1)" />
      <input type="button" value="尾页" @click="page(info.totalpage)" />
    </span>
  </div>
</template>

<script setup lang="ts">
import axios from "axios";
import { reactive, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();
onMounted(() => {
  list();
});
let data: any = reactive({
  pageindex: 1,
  pagesize: 2,
});
let info: any = reactive({
  list: [],
  totalcount: 0,
  totalpage: 0,
});
const page = (e: any) => {
  data.pageindex = e;
  list();
};
const list = () => {
  axios({
    url: "/api/Stores/GetStores",
    method: "get",
    params: data,
  }).then((res) => {
    console.log(res);
    Object.assign(info, res.data);
  });
};
const xg = () => {};
</script>

<style scoped>
span {
  margin: 0 10px;
}
</style>
